<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    
	
	<title>_${customer.customerName}_执行上架任务</title>
	<script type="text/javascript">
	
	    var skuArray=new Array(); //sku数组
	     var areaSkuArray=new Array(); //上架信息
	     
        $(function() {
            
            $("#stockCode").focus();
            
            var carInfoStr='${task.carInfo}';
            var carInfoArray=carInfoStr.split(';');
            for(var i=0;i<carInfoArray.length;i++){
               var skuInfo=carInfoArray[i];
               if(skuInfo==''){continue;} ;
               var tempArray=skuInfo.split(':');
               skuArray.push(tempArray[0]);
            }
            
            $("#area").focus();
            $("#area").val("");
            $("#sku").val("");
            $("#message").val("");
            
            var status='${task.status}';
			if(status=='3' || status=='4'){
			  $("#finish_btn").attr("disabled", true);
		      $("#finish_btn").attr("class", "btn");
		      $("#reload_btn").attr("disabled", true);
		      $("#reload_btn").attr("class", "btn");
		      $("#area").attr("readonly",true);
		      $("#sku").attr("readonly",true);
			}
               
	    });
	        
	     //美化车载信息
		function formatCarInfo(carInfo) {
			var carInfoArray = carInfo.split(";");
			var temp = '';
			for ( var i = 0; i < carInfoArray.length; i++) {
				var car = carInfoArray[i];
				if (car == null || car == '') {
				} else {
					temp += "【" + car + "(件)】";
				}
			}
			return temp;
		}
		
		//库位编码
		function stockCode(element){
		   //验证库位编码是否存在
		   if(1==1){
		     $("#boxCode").focus();
		     $("#boxCode").val("");
		   }else{
		     $("#stockCode").focus();
		     $("#stockCode").select();
		     $("#message").animate({width:200},200);
		     $("#message").val("库位编码录入有误，请检查...");
		   }
		}
		
		
		//箱编码
		function boxCode(element){
		   //验证箱编码
		   if(1==1){
		     $("#sku").focus();
		     $("#sku").val("");
		   }else{
		     $("#boxCode").focus();
		     $("#boxCode").select();
		     $("#message").animate({width:200},200);
		     $("#message").val("箱编码录入有误，请检查...");
		   }
		}
		
		//sku编码
		function sku(element){
		  
		  var sku=$(element).val();
		  var stockCode=$("#stockCode").val();
		  var boxCode=$("#boxCode").val();
		  var flag=0;
		  
		  for(var i=0;i<skuArray.length;i++){
		     var _sku=skuArray[i];
		     if(_sku==sku){
		       var sku_id="#sku_"+sku;
		       var num1_id="#num1_"+sku;
		       var num2_id="#num2_"+sku;
		       var num2=$(num2_id).html();
		       $(num2_id).html(Number(num2)+1);
		       flag=1;
		    }
		   }
		   
		   if(flag==0){
		      $("#message").animate({width:200},200);
		      $("#message").val("sku编码录入有误，请检查...");
		      $("#sku").focus();
		      $("#sku").select();
		   }else{
		     
		      $("#message").animate({width:200},200);
		      $("#message").val("扫描成功，请上架!");
		      
		      var areaSkuInfo=createAreaSkuInfo(stockCode,boxCode,sku);
		      areaSkuArray.push(areaSkuInfo);
		      
		      
		      //保存库存信息
			  var carType='${task.carType}';
			  var stockType='';
			  if(carType=='1' || carType=='2'){ //可销售库存
			     stockType='sales_num';
			  }else if(carType=='3'){  //不可销售库存（破损件）
			     stockType='unused_num';
			  }
			  
		      var stockInfo=createStockInfo(stockCode,boxCode,sku,1,stockType,'${customer.customerCode}');
		      stockArray.push(stockInfo);
		      
		      
			  $("#sku").val("");
			  $("#stockCode").val("");
			  $("#boxCode").val("");
			  $("#stockCode").focus();
		   }
		  
		}
		
		var stockArray=new Array(); //库存信息
		
		//创建库存信息对象
		function createStockInfo(stockCode,boxCode,sku,num,stockType,customerCode){
		    return {
		        stockCode:stockCode,
		        boxCode:boxCode,
		        sku:sku,
		        num:num,
		        stockType:stockType,
		        customerCode:customerCode
		    };
		}
		
		//创建入库信息对象
		function createAreaSkuInfo(stockCode,boxCode,sku){
		    return {
		        stockCode:stockCode,
		        boxCode:boxCode,
		        sku:sku
		    };
		}
		
		//上架完成，保存数据
		function finish(){
		    
		    var flag=0; 
		    var errorFlag=0;
		    
		    for(var i=0;i<skuArray.length;i++){
		      var sku=skuArray[i];
		      var num1_id="#num1_"+sku;
		      var num2_id="#num2_"+sku;
		      var num1=$(num1_id).html();
		      var num2=$(num2_id).html();
		      
		      if(num1==num2){
		        $(num1_id).parent('tr').css("background-color",'');
		      }else{
		        $(num1_id).parent('tr').css("background-color",'yellow');
		        flag=1;
		      }
		   }
		   
		   if(flag==1){
		      var r=confirm("实际上架数量异常，你确定完成上架吗？");
		      if(r==false){
     		      return;
		      }else{
		        errorFlag=1;
		      }
		   }
		   
		   //上架信息
		   var taskInfo="";
		   for(var i=0;i<skuArray.length;i++){
		       var sku=skuArray[i];
		       var num=$("#num2_"+sku).html();
		       taskInfo+=sku+":"+num+";";
		    }
		    
		    //库存信息
		    var stockList = eval(stockArray); 
		    var stockText = JSON.stringify(stockList);
		    
	        $.ajax({
				type:'post',
				url:'${ctx}/cusInstorageUpshelf/ajaxUpshelf',
				data:{
				    stockText:stockText,
					taskInfo:taskInfo,
					taskId:'${task.id}',
					errorFlag:errorFlag
				},
				dataType:'json',
				success:function(data) {
				    if(data==true){
				      alert("此任务已完成！");
				      
				      $("#finish_btn").attr("disabled", true);
				      $("#finish_btn").attr("class", "btn");
				      
				      $("#reload_btn").attr("disabled", true);
				      $("#reload_btn").attr("class", "btn");
				      
				      $("#stockCode").attr("readonly",true);
				      $("#boxCode").attr("readonly",true);
         		      $("#sku").attr("readonly",true);
					  
				    }else{
				      alert("网络繁忙，请稍后重试...");
				    }
				},
				error:function() {
					alert("网络繁忙，请稍后重试...");
				}
		   });
		    
		}
		
		 //提示框动画效果
		 var effectFlag=0;
		 function effect(){
		   effectFlag=1;
		 }
		 function keyDown(){
			 if(effectFlag==1){
			    $("#message").animate({width:0},200);
			   effectFlag=0;
			 }
		 }
		
		
    </script>
</head>

<body>
	<div style="height: 10px;"></div>
	
	<table id="contentTable" class="table table-striped table-bordered table-condensed">
	    <thead>
			<th style="vertical-align: middle; color: white;" colspan="9" bgcolor="#8EB4CB">编码扫描区</th>
		</thead>
		<thead>
		     <th style="vertical-align: middle; height: 50px;" colspan="5" >
		      <span style="margin-left: 0px; vertical-align: middle;">库位编码：<input type='text' style='width: 200px;vertical-align: middle;' id="stockCode" onchange="stockCode(this);" onfocus="effect();" onkeydown="keyDown();"></span>
		      <span style="margin-left: 0px; vertical-align: middle;">箱编码：<input type='text' style='width: 200px;vertical-align: middle;' id="boxCode" onchange="boxCode(this);" onfocus="effect();" onkeydown="keyDown();"></span>
		      <span style="margin-left: 10px; vertical-align: middle;">SKU编码：<input type='text' style='width: 200px;vertical-align: middle;' id="sku" onchange="sku(this);" onfocus="effect();" onkeydown="keyDown();"></span>
		      <input type='text' style='width:0px; margin-left:20px; margin-top:7px; height:30px; border:none; font-weight:bold;  background-color:#B0CEA3';" id="message" />
		     </th>
		  </thead>
	</table>
	
	<table id="contentTable" class="table  table-bordered table-condensed">
	    <thead>
			<th style="vertical-align: middle; color: white;" colspan="6" bgcolor="#8EB4CB">上架信息</th>
		</thead>
		<thead><tr>
		    <th style="width: 100px;">任务批次号</th>
		    <th style="width: 50px;">上架类型</th>
			<th style="width: 50px;">车编号</th>
			<th style="width: 100px;">SKU编号</th>
			<th style="width: 80px;">任务分配数量（件）</th>
			<th style="width: 80px;">实际上架数量（件）</th>
		</tr></thead>
		<tbody>
		<c:forEach items="${carInfoMap}" var="map">
			<tr>
			   <td>${task.taskBatch}</td>
			   <td>
			       <c:if test="${task.carType eq '1' }"><font color='blue'>整箱件</font></c:if>
			       <c:if test="${task.carType eq '2' }">散货件</c:if>
			       <c:if test="${task.carType eq '3' }"><font color='red'>破损件</font></c:if>
			   </td>
			   <td>${task.carNo}号车</td>
			   <td id="sku_${map.key}">${map.key}</td>
			   <td id="num1_${map.key}">${map.value}</td>
			   <td id="num2_${map.key}" style="color: blue;">0</td>
			</tr>
		</c:forEach>
		<tr>
		  <td colspan="6">
		     <input id="finish_btn" class="btn btn-primary" type="submit" value="上架完成" onclick="finish();" />&nbsp;	
			 <input id="reload_btn" class="btn btn-danger" type="button" value="重新扫描上架" onclick="location.reload();" />&nbsp;
		  </td>
		</tr>
		</tbody>
	</table>
	
	<div class="form-actions">
			 <a href="${ctx}/cusInstorageUpshelf" data-toggle="modal" class="btn btn-info" >返回</a>
	</div>
	
</body>
</html>
